import "bootstrap";
import Animation from "../public/js/skroll.min.js";
import "../scss/index.scss";
let delay;
$(window).ready(function(){
  $('.submit-btn').click(function(){
    var mobile = $(`input[name='mobile']`).val()
    if(mobile && (/^1[3456789]\d{9}$/.test(mobile))){
      alert('提交成功')
    }else{
      alert('请确认您填写的手机号码')
    }
  })
  $('.sw_ipt-btn').click(function(){
    var mobile = $(`input[name='mobile-footer-bar']`).val()
    if(mobile && (/^1[3456789]\d{9}$/.test(mobile))){
      alert('提交成功')
    }else{
      alert('请确认您填写的手机号码')
    }
  })
  $("#work").hover(
    function() {
      // 鼠标移入时添加hover类
      if (delay) {
        clearTimeout(delay);
        delay = null;
      }
      $(".nav_sub-content").addClass("show");
    },
    function() {
      // 鼠标移出时移出hover类
      if (delay) {
        clearTimeout(delay);
        delay = null;
      }
      delay = setTimeout(() => {
        $(".nav_sub-content").removeClass("show");
      }, 500);
    }
  );
  $(".nav_sub-content").hover(
    function() {
      // 鼠标移入时添加hover类
      if (delay) {
        clearTimeout(delay);
        delay = null;
      }
      $(this).addClass("show");
    },
    function() {
      // 鼠标移出时移出hover类
      if (delay) {
        clearTimeout(delay);
        delay = null;
      }
      $(this).removeClass("show");
    }
  );
  Animation();
  let skroll = new Skroll();
  skroll
    .add(".anim5", {
      animation: "growInLeft",
      delay: 80,
      duration: 500,
      easing: "cubic-bezier(0.37, 0.27, 0.24, 1.26)"
    })
    .add(".anim6", {
      animation: "growInRight",
      delay: 80,
      duration: 500,
      easing: "cubic-bezier(0.37, 0.27, 0.24, 1.26)"
    })
    .add(".anim7", {
      animation: "growInLeft",
      delay: 80,
      duration: 500,
      easing: "cubic-bezier(0.37, 0.27, 0.24, 1.26)"
    })
    .add(".anim8", {
      animation: "growInRight",
      delay: 80,
      duration: 500,
      easing: "cubic-bezier(0.37, 0.27, 0.24, 1.26)"
    })
    .add(".anim9", {
      animation: "growInLeft",
      delay: 80,
      duration: 500,
      easing: "cubic-bezier(0.37, 0.27, 0.24, 1.26)"
    })
    .add(".anim10", {
      animation: "growInRight",
      delay: 80,
      duration: 500,
      easing: "cubic-bezier(0.37, 0.27, 0.24, 1.26)"
    })
    .add(".anim11", {
      animation: "growInLeft",
      delay: 80,
      duration: 500,
      easing: "cubic-bezier(0.37, 0.27, 0.24, 1.26)"
    })
    .add(".anim12", {
      animation: "growInRight",
      delay: 80,
      duration: 500,
      easing: "cubic-bezier(0.37, 0.27, 0.24, 1.26)"
    })
    .add(".tab-item", {
      animation: "rotateLeftIn",
      delay: 100,
      duration: 750
    })
    .add(".card", {
      animation: "fadeInUp",
      delay: 120,
      duration: 600,
      wait: 250
    })
    .init();
  skroll.recalcPosition();
  setInterval(function() {
    skroll.recalcPosition();
  }, 2000);
  /**
   * 彩虹图
   */
  $(".color-item").hover(
    function() {
      let age = parseInt($(this).data("age"),10)
      if(age===0){
        return
      }
      console.log('color-item-hover')
      // 彩虹条从第二个开始依次色值
      let colorArray = [
        {
          bg:'#E96B13',
          color:'',
          title:'图形编程1阶',
          keshi:'80课室',
          nianling:'小学1-4年纪',
          type:'图形化编程工具',
          target:'学习目标学习目标学习目标学习目标学习目标学习目标学习目标学习目标'
        },
        {
          bg:'#F7C10A',
          color:'',
          title:'图形编程1阶',
          keshi:'80课室',
          nianling:'小学1-4年纪',
          type:'图形化编程工具',
          target:'学习目标'
        },
        {
          bg:'#EDE509',
          color:'',
          title:'图形编程1阶',
          keshi:'80课室',
          nianling:'小学1-4年纪',
          type:'图形化编程工具',
          target:'学习目标'
        },
        { bg:'#9FC826',
          color:'',
          title:'图形编程1阶',
          keshi:'80课室',
          nianling:'小学1-4年纪',
          type:'图形化编程工具',
          target:'学习目标'},
        { bg:'#116B66',
          color:'',
          title:'图形编程1阶',
          keshi:'80课室',
          nianling:'小学1-4年纪',
          type:'图形化编程工具',
          target:'学习目标'},
        { 
          bg:'#0E71C2',
          color:'#fff',
          title:'图形编程1阶',
          keshi:'80课室',
          nianling:'小学1-4年纪',
          type:'图形化编程工具',
          target:'学习目标'},
        {
          bg:'#173289',
          color:'#fff',
          title:'图形编程1阶',
          keshi:'80课室',
          nianling:'小学1-4年纪',
          type:'图形化编程工具',
          target:'学习目标'},
        {
          bg:'#1E1E49',
          color:'#fff',
          title:'图形编程1阶',
          keshi:'80课室',
          nianling:'小学1-4年纪',
          type:'图形化编程工具',
          target:'学习目标'},
        {
          bg:'#321A42',
          color:'#fff',
          title:'图形编程1阶',
          keshi:'80课室',
          nianling:'小学1-4年纪',
          type:'图形化编程工具',
          target:'学习目标'},
      ]
      let color = colorArray[age-1].color || '#000'
      let bg = colorArray[age-1].bg
      let item = colorArray[age-1]
      console.log('item,'+JSON.stringify(item))
      $('.blackboard').find('.text-wrap .title')
        .css('border-bottom','1px solid '+color).text(colorArray[age-1].title)
      $('.blackboard').find('.text-wrap .titem .icon')
        .css('background-color',color)
        .css('color',bg)
      $('.blackboard').find('.text-wrap .nianling .text').text(item.nianling)
      $('.blackboard').find('.text-wrap .keshi .text').text(item.keshi)
      $('.blackboard').find('.text-wrap .type .text').text(item.type)
      $('.blackboard').find('.text-wrap .target .text').text(item.target)
  
      $('.blackboard')
        .css("box-sizing","border-box")
        .css("background-color",colorArray[age-1].bg)
        .css("color",color)
    },
    function() {
      // 鼠标移出时移出hover类
    }
  );
  $(".intro-item").click(function(){
    $(this).parent().parent().parent().find('.intro-imgs').attr('src',$(this).data("img"))
    $(this).parent().find('.intro-item').removeClass('open')
    $(this).addClass('open')
  })
  $(".tab-item").click(function(){
    $(".tab-item").removeClass('active')
    $(this).addClass('active')
    $('.tab_content-item').hide();
    let classname  = $(this).data('tabname')
    console.log('.tab-'+classname)
    $('.tab-'+classname).show()
  })
})

